<template>
  <div id="news-letter">
    <title-bar>
      <div class="title-content" v-if="news">
        <div class="top">
          <span>新闻快讯</span>
          <div>{{news.length}}则</div>
        </div>
      </div>
      <div class="news-else" v-else>这里还未普及</div>
    </title-bar>

    <news-content class="content">
      <news-Item class="content-item" 
                 v-for="(item, index) in news" 
                 :key="index" 
                 :itemInfo="item">
        <template v-slot:title><div class="item-title">{{item.title}}</div></template>
        <template v-slot:date><div class="item-date">{{item.date}}</div></template>
        <template v-slot:content><div class="item-content">{{item.content}}</div></template>

      </news-Item>

    </news-content>
    
  </div>
</template>

<script>
import {getNews} from '../../network/news'
import TitleBar from '../../components/titleBar/TitleBar.vue'
import NewsContent from './newsChild/NewsContent.vue'
import NewsItem from './newsChild/NewsItem.vue'
  export default {
    data() {
      return {
        news:null,
      }
    },
    components:{
      TitleBar,
      NewsContent,
      NewsItem
    },
    created() {
      this.getNews()
    },
     activated() {
    document.documentElement.scrollTop = this.windowY;
  },
  deactivated() {
    this.windowY = document.documentElement.scrollTop;
  },
    methods: {
      getNews(){
        getNews().then(res=>{
          console.log(res)
          // console.log(res[0].content)
          // this.news = res
          // 将新闻内容中的<br/>换行标签全部转化为''
          let paper = res
          for( let i in paper){
            paper[i].content = paper[i].content.replace(/<br\/>/g, '')
          }
          this.news = res
          // console.log(this.news[0].content);
        })
      }
    },
  }
</script>

<style lang="less" scoped>
.news-letter{
  padding: 20px 0;
  
}
.top{
  display: flex;
  position: relative;
  height: 40px;
  line-height: 40px;
  div{
    font-size: 20px;
    font-weight: 600;
    margin-left: 2px;
    color: rgb(250, 41, 76);
  }
}
.item-content{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

</style>